<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="1024" height="768" style="border: 1px solid #ccc;display:block;margin: 50px auto;"></canvas>
		<script>

			window.onload=function(){
				let canvas=document.getElementById("canvas");
				let context=canvas.getContext("2d");
				canvas.width=1024;
				canvas.height=768;
				//beginPath和lineTo结合起来可以起到moveTo的作用,可以 不要moveTo	
				context.fillStyle="#000";
				context.fillRect(0,0,canvas.width,canvas.height);
				for(let i=0;i<200;i++){
					//随机半径
					let r=Math.random()*10+10;
					//随机偏移
					let x=Math.random()*canvas.width;
					let y=Math.random()*canvas.height;
					//随机旋转角度
					let a=Math.random()*360;
					drawStar(context,r/2.0,r,x,y,a);
				}
			}
			
			//绘制星星函数
			function drawStar(ext,r,R,x,y,rot){
				ext.beginPath();
				for(let i=0;i<5;i++){
					//300为大圆半径,400为x轴的位移,因为在开始在原点
					//150为小圆半径
					//rot是一个顺时针旋转多少度
					ext.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
								-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
					ext.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
								-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
			
				}
				ext.closePath();
				
				ext.fillStyle="#fb3";//填充色
				ext.strokeStyle="#fd5";//线条色
				ext.lineWidth=3;//线条宽
				ext.lineJoin="round";//接线处为圆形
				ext.fill();//先填充后描边				
				ext.stroke();
			}
		</script>
	</body>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>